<template>
  <div class="container bg-white" v-if="data">
    <div class="commission-header">
      <van-cell-group class="user-cell" v-if="data.user">
        <van-cell :border="false" is-link center>
          <template slot="icon">
            <div class="user-cell-avatar">
              <van-image :src="data.user.avatar" fit="cover" round />
              <span>
                <b>{{data.type.name}}</b>
              </span>
            </div>
          </template>
          <template slot="title">
            <div class="van-cell-text">
              <span>{{data.user.nickname}}</span>
              <van-image :src="data.level.icon" fit="contain" width="auto" height="15" />
            </div>
            <div class="van-cell-desc">
              <span>
                <label>等级：</label>
                {{data.level.level_no}}
              </span>
              <span>
                <label>经验：</label>
                {{data.experience}}
              </span>
            </div>
          </template>
          <template slot="right-icon">
            <van-icon name="qr" />
            <van-icon name="arrow" class="van-cell__right-icon" />
          </template>
        </van-cell>
      </van-cell-group>
      <div class="user-account" v-if="data.account">
        <div class="user-account__title">历史提现佣金(元)</div>
        <div class="font-number user-account-text">{{formatPrice(data.account.withdraw)}}</div>
        <div class="user-account__title">可提现佣金(元)</div>
        <div class="flexbox">
          <div class="flexbox-item text-left">
            <h2 class="font-number user-account-text">{{formatPrice(data.account.current)}}</h2>
          </div>
          <div class="flexbox-item text-right">
            <van-button
              type="default"
              size="small"
              :disabled="!canWithdraw"
              @click="withdrawCash"
            >佣金提现</van-button>
          </div>
        </div>
      </div>
    </div>
    <van-grid :column-num="3" :icon-size="34" clickable class="member-grid" v-if="menus.length">
      <van-grid-item
        :icon="item.icon"
        v-for="(item,index) in menus"
        :key="index"
        @click="pushNativelink(item.link)"
      >
        <template slot="text">
          <p class="member-grid__text">{{item.title}}</p>
          <label class="member-grid__label" v-if="item.text">
            <span>{{item.text.number}}</span>
            {{item.text.unit}}
          </label>
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import {
  Row,
  Col,
  Icon,
  Button,
  Cell,
  CellGroup,
  Swipe,
  SwipeItem,
  Card,
  Grid,
  GridItem,
  Image,
  Lazyload
} from 'vant'

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
    [Card.name]: Card,
    Lazyload
  },

  data () {
    return {
      data: null,
      user: {
        username: '',
        avatar: 'https://gitee.com/uploads/14/637814_77252102.png?1481090376',
        credits: '0',
        link: ''
      },
      categories: [
        {
          title: '分销佣金',
          icon: '../../static/icons/commission/commission.png',
          text: {
            number: '0.00',
            unit: '元'
          },
          link: {
            name: ''
          }
        },
        {
          title: '分销订单',
          icon: '../../static/icons/commission/list.png',
          text: { number: 0, unit: '笔' }
        },
        {
          title: '提现明细',
          icon: '../../static/icons/commission/withdraw.png',
          text: { number: 0, unit: '笔' }
        },
        {
          title: '我的关注',
          icon: '../../static/icons/commission/group.png',
          text: { number: 0, unit: '人' }
        },
        {
          title: '佣金排名',
          icon: '../../static/icons/commission/rank.png',
          text: null
        },
        {
          title: '推广二维码',
          icon: '../../static/icons/commission/qrcode.png',
          text: null
        }
      ],
      currentDate: '--'
    }
  },

  created: function () {
    this.onLoad()
  },

  computed: {
    menus () {
      return this.data.menus
    },
    canWithdraw () {
      return this.data.account && this.data.account.current > 1000
    }
  },

  methods: {
    onLoad () {
      this.axios
        .get('/commission')
        .then(response => {
          this.data = response.data
        })
        .catch(error => {
          console.log(error)
        })
    },
    redirect (name, id) {
      this.$router.push({ name: name, params: { id: id } })
    },
    formatPrice (price) {
      return (price / 100).toFixed(2)
    },
    onClick () {
      this.$toast('点击结算')
    },
    getTitle () {
      return 'test'
    },
    withdrawCash () {
      this.$router.push({ name: 'commission/withdraw' })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.commission-header {
  background: #3a95fe;
  .user-cell {
    background: transparent;
  }
  .van-cell {
    background: transparent;
    padding: 15px;
    color: rgba(255, 255, 255, 1);
    &__right-icon {
      color: rgba(255, 255, 255, 0.5);
    }
    .van-icon {
      color: rgba(255, 255, 255, 0.5);
    }
    &-text {
      font-size: 18px;
      display: flex;
      align-items: center;
      /deep/ .van-image {
        margin-left: 5px;
        width: auto;
        &__img {
          width: auto;
        }
      }
    }
    &-desc {
      display: flex;
      align-items: center;
      padding-left: 2px;
      font-size: 12px;
      font-weight: 300;
      > * {
        padding-right: 8px;
        position: relative;
        margin-right: 8px;
        &::after {
          position: absolute;
          right: 0;
          top: 25%;
          height: 50%;
          width: 1px;
          border-right: 1px solid rgba(255, 255, 255, 0.3);
          content: "";
        }
        &:last-child {
          margin: 0;
          padding: 0;
          &::after {
            display: none;
          }
        }
      }
    }
  }
}

.member-grid {
  /deep/ .van-grid-item {
    &__content {
      &--center {
        justify-content: flex-start;
      }
    }
  }
  &__label {
    display: block;
    text-align: center;
    color: #666;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 12px;
    margin-top: 5px;
    span {
      color: #ff6f33;
    }
  }
}

.user-account {
  padding: 0 15px;
  &__title {
    font-size: 14px;
    margin: 15px 0 0;
    color: rgba(255, 255, 255, 0.6);
  }
  &-text {
    color: #fff;
    padding: 10px 0;
  }
  h2&-text {
    font-size: 24px;
    font-weight: 300;
    margin: 0;
    padding: 0;
  }
  .flexbox {
    padding: 15px 0;
  }
  /deep/ .van-button {
    border-radius: 13px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: transparent;
    color: #fff;
  }
}

.van-row /deep/ {
  .van-col {
    &--8 {
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
    }
    &--8:nth-child(3n) {
      border-right: 0;
    }
  }
}
</style>
